{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"定金支付",back:1} %}

    <div class="bcf bdtso pad10 lh2 c11">
        <div class="c12 fs9">支付金额</div>
        <div class="padt20 padb20 bdbda flex-r flex-end">
            <div class="fs24 c11">￥</div>
            <div class="flex1 fs20">[[money]]</div>
        </div>
        <div class="c12 op7 padt3 fs7">
            雇佣时需要支付全部款项，任务完成后需要您确认，对方才能获得
        </div>
    </div>

    <div class="bcf fs9 bdtso pad10 lh2 c12 ">
        <div class="">支付方式</div>
        <div class="">
            <mu-ripple class="pos-r flrc" @click="payType = 100">
                <div class="wh15-15 flcc">
                    <svg t="1582339887420" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="4798" width="7vw" height="7vw">
                        <path d="M896.002399 0 127.997601 0C57.597193 0 0 57.597193 0 127.997601l0 768.004799c0 70.400408 57.597193 127.997601 127.997601 127.997601l768.004799 0c70.400408 0 127.997601-57.597193 127.997601-127.997601L1024 127.997601C1024 57.597193 966.402807 0 896.002399 0L896.002399 0zM512.003199 787.203863c-44.800376 0-83.203623-6.400968-121.603031-19.205463-25.600032 12.803215-63.99944 44.800376-76.801376 51.201344-25.601312 12.803215-19.199064-12.796817-19.199064-12.796817l12.801936-76.801376c-76.802655-51.201344-121.603031-134.399848-121.603031-224.0006 0-159.99988 147.197945-288.002599 326.403287-288.002599 108.798536 0 211.196105 51.201344 268.799696 121.601752L460.801856 486.401888c0 0-25.601312 12.798096-51.201344-6.400968l-51.201344-38.399408c0 0-38.399408-32.001-19.200344 19.200344l51.201344 115.200784c0 0 6.400968 31.995881 44.800376 12.798096 32.002279-12.798096 268.799696-159.99988 371.201104-217.598352 19.199064 38.399408 31.997161 83.198504 31.997161 127.997601C838.400088 652.798896 691.202143 787.203863 512.003199 787.203863L512.003199 787.203863zM512.003199 787.203863"
                              p-id="4799" fill="#1afa13"></path>
                    </svg>
                </div>
                <div class="flex1">微信</div>
                <div class="fs12">
                    <span class="fa fa-circle c01" v-if="payType == 100"></span>
                    <span class="fa fa-circle-thin" v-if="payType != 100"></span>
                </div>
            </mu-ripple>
            <mu-ripple class="pos-r flrc" @click="payType = 200">
                <div class="wh15-15 flcc">
                    <svg t="1582339703388" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3787" width="9vw" height="9vw">
                        <path d="M902.095 652.871l-250.96-84.392s19.287-28.87 39.874-85.472c20.59-56.606 23.539-87.689 23.539-87.689l-162.454-1.339v-55.487l196.739-1.387v-39.227H552.055v-89.29h-96.358v89.294H272.133v39.227l183.564-1.304v59.513h-147.24v31.079h303.064s-3.337 25.223-14.955 56.606c-11.615 31.38-23.58 58.862-23.58 58.862s-142.3-49.804-217.285-49.804c-74.985 0-166.182 30.123-175.024 117.55-8.8 87.383 42.481 134.716 114.728 152.139 72.256 17.513 138.962-0.173 197.04-28.607 58.087-28.391 115.081-92.933 115.081-92.933l292.486 142.041c-11.932 69.3-72.067 119.914-142.387 119.844H266.37c-79.714 0.078-144.392-64.483-144.466-144.194V266.374c-0.074-79.72 64.493-144.399 144.205-144.47h491.519c79.714-0.073 144.396 64.49 144.466 144.203v386.764z m-365.76-48.895s-91.302 115.262-198.879 115.262c-107.623 0-130.218-54.767-130.218-94.155 0-39.34 22.373-82.144 113.943-88.333 91.519-6.18 215.2 67.226 215.2 67.226h-0.047z"
                              fill="#02A9F1" p-id="3788"></path>
                    </svg>
                </div>
                <div class="flex1">支付宝</div>
                <div class="fs12">
                    <span class="fa fa-circle c01" v-if="payType == 200"></span>
                    <span class="fa fa-circle-thin" v-if="payType != 200"></span>
                </div>
            </mu-ripple>

            <mu-ripple class="pos-r flrc" @click="payType = 500">
                <div class="wh15-15 flcc">
                    <svg t="1584233783521" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3387" width="9vw" height="9vw">
                        <path d="M511.999488 64.021106c-247.27171 0-447.724091 200.452381-447.724091 447.724091s200.452381 447.724091 447.724091 447.724091 447.724091-200.453405 447.724091-447.724091S759.271198 64.021106 511.999488 64.021106zM379.992989 256.420067c32.745798-27.629267 105.400538 30.699186 130.983193 28.652574 25.582655 2.046612 98.237395-56.281841 130.983193-28.652574s-39.653115 90.786703-39.653115 90.786703L419.629731 347.20677C419.629731 347.20677 347.24719 284.049335 379.992989 256.420067zM609.213577 379.952568c0 9.05012-7.322779 16.372899-16.372899 16.372899l-163.728992 0c-9.05012 0-16.372899-7.322779-16.372899-16.372899 0-9.05012 7.322779-16.372899 16.372899-16.372899l163.728992 0C601.890798 363.579669 609.213577 370.902448 609.213577 379.952568zM510.976182 772.550131c-126.60242 0-229.220588 11.416004-229.220588-95.67913 0-79.626525 56.761772-205.01428 137.874137-264.173658l182.676529 0c81.128739 59.159378 137.89051 184.547133 137.89051 264.173658C740.196771 783.967158 637.578602 772.550131 510.976182 772.550131z"
                              p-id="3388" fill="#ea9518"></path>
                        <path d="M513.491469 532.48352c7.241938 0 12.892635 2.263553 16.987906 6.766101 4.094248 4.501524 6.158257 10.979052 6.158257 19.408025l45.447075 0c0-14.20656-4.839215-25.6461-14.482853-34.387181-9.643638-8.741082-22.942525-14.086833-39.860846-16.060791L527.741008 483.71991l-23.452131 0 0 24.032346c-17.698081 1.443885-31.707143 6.237051-42.061978 14.400988-10.354835 8.162914-15.532765 18.58938-15.532765 31.253818 0 13.967106 5.110391 24.708751 15.362896 32.218796 10.253528 7.514137 26.158776 14.233166 47.713698 20.156062 9.91379 3.731998 16.784268 7.465019 20.608364 11.222599 3.822049 3.75451 5.750981 8.860808 5.750981 15.313777 0 6.309706-1.860371 11.342326-5.649674 15.145955-3.789303 3.781116-9.644661 5.685489-17.630542 5.685489-8.593725 0-15.498996-2.143826-20.608364-6.381337-5.110391-4.239558-7.68196-11.342326-7.68196-21.288862L440.229908 625.479541l-0.338714 0.579191c-0.440022 16.156982 5.110391 28.414143 16.649192 36.771485 11.538801 8.354272 26.39516 13.242606 44.497447 14.688537l0 22.419616 23.61893 0 0-22.539342c17.700127-1.444908 31.641651-6.069229 41.826618-13.942547 10.18599-7.875365 15.294334-18.325367 15.294334-31.375591 0-13.896498-5.245468-24.77936-15.70161-32.679283-10.456143-7.897877-26.15673-14.56881-47.070039-20.034289-10.455119-4.164856-17.528212-8.04114-21.183462-11.606339-3.653203-3.563152-5.480828-8.308223-5.514597-14.20656 0-6.382361 1.658779-11.488659 4.940522-15.316847C500.532319 534.410406 505.946632 532.48352 513.491469 532.48352z"
                              p-id="3389" fill="#ea9518"></path>
                    </svg>
                </div>
                <div class="flex1">钱包余额</div>
                <div class="fs12">
                    <span class="fa fa-circle c01" v-if="payType == 500"></span>
                    <span class="fa fa-circle-thin" v-if="payType != 500"></span>
                </div>
            </mu-ripple>
        </div>
    </div>
    <div class="pad10">
        <mu-button @click="doPay()" color="success" full-width large round>确认支付</mu-button>
    </div>


{% endblock %}
{% block myJs %}
    <script src="{{ root }}/js/ali.js{{ rnd }}"></script>
    <script src="{{ root }}/js/wx.js{{ rnd }}"></script>
{% endblock %}